<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <script src="../js/formjs.js" rel="script"></script>
    <style type="text/css" >
        table {
            width: 500px;
            height: 300px;
            border: 1px solid;
            align-content: center;
        }

        span {
            color: red;
        }
    </style>
    <link href="../css/formcss.css"  rel="stylesheet">
    <script type="application/javascript">
        function doFormSum() {
            var name=document.getElementById("username").value;
            var pwd=document.getElementById("password").value;
            var sex=document.getElementsByName("sex");
            var pro=document.getElementsByName("pro")[0].value;
            var city=document.getElementsByName("city")[0].value;

            if(name==null||name==""){
                document.getElementById("errusername").innerHTML="username cannot be null";
                return false;
            }else {
                document.getElementById("errusername").innerHTML="";
            }

            if(pwd==null||pwd==""){
                document.getElementById("errpassword").innerHTML="password cannot be null";
                return false;
            }else{
                document.getElementById("errpassword").innerHTML="";
            }
            if(!sex[0].checked&&!sex[1].checked){
                document.getElementById("errsex").innerHTML="please choose sex!";
                return false;
            }else{
                document.getElementById("errsex").innerHTML="";
            }
            if(pro=="please select"){
                alert("please select Province");
                return  false;
            }
            if(city=="please select"){
                alert("please select city")
                return  false;
            }
            return  true;
        }
        function proCheckCity(proVal) {
            var citys=new Array();
            if(proVal=="江苏"){
                citys=new Array("NanJing","SuZhou");
            }
            if(proVal=="浙江"){
                citys= new Array("NanJing","HangZhou");
            }

            var cityVal=document.getElementsByName("city")[0];
            cityVal.innerHTML="<option selected=\"selected\">please select</option>";
            for(var i=0;i<citys.length;i++){
                cityVal.innerHTML+="<option value='"+citys[i]+"'>"+citys[i]+"</option>";
            }
        }
    </script>
</head>
<body>
<form method="post" action="success.html" onsubmit="return doFormSum()">
    <table class="tab" align="center" border="1px solid">
        <tr>
            <td>username</td>
            <td>
                <input type="text" id="username" name="username">
                <span id="errusername">*</span>
            </td>

        </tr>
        <tr>
            <td>password</td>
            <td>
                <input type="password" id="password" name="password">
                <span id="errpassword">*</span>
            </td>
        </tr>
        <tr>
            <td>sex</td>
            <td>
                <input type="radio" name="sex" value="man">man
                <input type="radio" name="sex" value="woman">woman
                <span id="errsex">*</span>
            </td>
        </tr>
        <tr>
            <td>addres</td>
            <td>
                <select name="pro" onchange="proCheckCity(this.value)">
                    <option selected="selected" value="please select">please&nbsp;&nbsp;select</option>
                    <option value="江苏">JiangSu</option>
                    <option value="浙江">ZheJiang</option>
                </select>
                <select name="city">
                    <option selected="selected">please&nbsp;&nbsp;select</option>
                </select>
                <span id="errprocity">*</span>

            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><button type="submit" value="提交">提交</button></td>
        </tr>
    </table>

</form>
</body>
</html>